<template>
	<div class="mainer-container">
		<el-main>
			<el-row>
				<el-col :span="16">
					<div class="demo-block">
						<div class="left-block">
							<span>总资产(USDT)</span>
							<h3>{{total}}</h3>
						</div>
						<div class="right-block">
							<div>
								<label>折合约(CNY)</label>
								<el-tooltip class="item" effect="dark" placement="right">
									<div slot="content">更新时间：{{current}}<br/>汇率换算结果仅供参考</div>
									<i class="el-icon el-icon-info" style="margin-left: 10px;"></i>
								</el-tooltip>
							</div>
							<h3>{{equalTo}}</h3>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-col>
				<el-row :span="24">
					<div id="myChart" style="width: 1000px;height: 500px;" :options="tableData"></div>
				</el-row>
			</el-col>
		</el-main>
	</div>
</template>

<script>
	export default {
		name: "walletInfo",
		data() {
			return {
				total: "0.00000000",
				equalTo: "0.00000000",
				current: null,
				tableData: {
					title: {
						text: '资产趋势图',
						left: "center",
						textStyle: {
							fontSize: 14,
							fontWeight: "normal"
						}
					},
					tooltip: {
						trigger: 'axis',
						formatter: function (params) {
							params = params[0];
							let xValue = params.name;
							let yValue = params.value[1];
							return "日期：" + xValue + "<br>"
								+ "余额：" + yValue + " USD<br>"
								+ "余额：" + (yValue * 7).toFixed(2) + " CNY<br>";
						},
						axisPointer: {
							type: "cross",
							animation: false
						}
					},
					xAxis: {
						name: "时间轴",
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						name: "金额",
						type: 'value',
						splitLine: {
							show: false
						},
						min: function (value) {
							return value.min * 0.999;
						},
						max: function (value) {
							return value.max;
						}
					},
					series: [{
						type: 'line',
						smooth: true,
						data: []
					}]
				}
			}
		},
		mounted() {
			this.task();
		},
		created() {
			this.currentAmount();
			this.curve();
		},
		methods: {
			currentAmount() {//最新资产
				this.api.wallet.currentAmount().then(result => {
					result = result.data;
					if (result.code === 200) {
						if (result.data.total > 0) {
							this.total = result.data.total;
						}
						if (result.data.equalTo > 0) {
							this.equalTo = result.data.equalTo;
						}
					} else {
						this.$message({
							message: result.message,
							type: "warning"
						});
					}
				});
			},
			curve() {//资产曲线
				this.api.wallet.curve().then(result => {
					result = result.data;
					if (result.code === 200) {
						let seriesData = [];
						result.data.forEach(item => {
							let name = this.$Moment(item.createTime).format("YYYY/MM/DD HH:mm:ss");
							let value = [name, item.amount.toFixed(2)];
							seriesData.push({name, value});
						});
						this.$nextTick(() => {
							//执行echarts方法
							const myChart = this.$echarts.init(document.getElementById('myChart'));
							this.tableData.series[0].data = seriesData;
							this.current = seriesData[seriesData.length - 1].name
							myChart.setOption(this.tableData);
						});
					} else {
						this.$message({
							message: result.message,
							type: "warning"
						});
					}
				});
			},
			task() {//定时获取资曲线
				let that = this;
				let instance = setInterval(function () {
					that.curve();
				}, 10000);
				// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
				this.$once('hook:beforeDestroy', () => {
					clearInterval(instance);
				});
			}
		}
	}
</script>

<style scoped>
	.mainer-container {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		margin-bottom: 5px;
	}

	.demo-block {
		margin-left: 8%;
		padding: 36px;
		border: 1px solid #e6e6e6;
		border-radius: 3px;
	}

	.left-block {
		display: inline-block;
		width: 49%;
		border-right: 1px solid #e6e6e6;
	}

	.left-block > h3 {
		text-align: center;
	}

	.right-block {
		display: inline-block;
		width: 49%;
	}

	.right-block > h3 {
		text-align: center;
	}

	.right-block > div {
		display: flex;
		justify-content: flex-end
	}

	#myChart {
		width: 1000px;
		height: 400px;
		margin-top: 40px;
	}

</style>
